<template>
    <div class="get-money-list-container">
        <List v-model="loading"
              :finished="finished"
              finished-text="没有更多了~"
              :immediate-check="false"
              @load="onLoad">
            <div class="get-money-list-box acea-row row-column">
                <div class="get-money-list-item van-hairline--bottom" v-for="balanceItem in balanceList"
                     :key="balanceItem.urmtoId">
                    <div class="top-item acea-row row-middle row-between">
                        <div>微信账号 ({{balanceItem.urmtoUmMobile | plusxing(3,4)}}) {{balanceItem.urmtoUmName}}</div>
                        <div class="status1" v-if="balanceItem.urmtoStatus === 0">待审核</div>
                        <!--                                            <div class="status2">待打款</div>-->
                        <div class="status3" v-else-if="balanceItem.urmtoStatus === 2">已驳回</div>
                        <div class="status4" v-else>已完成</div>
                    </div>
                    <div class="bottom-item acea-row row-middle row-between">
                        <div>{{balanceItem.poCreationDate | format}}</div>
                        <div>提现金额{{balanceItem.urmtoMoney}}</div>
                    </div>
                    <div class="bottom-item acea-row row-middle row-between">
                        <div>{{balanceItem.urmtoUpdateDate | format}}</div>
                        <div>打款金额{{balanceItem.urmtoMoney}}</div>
                    </div>
                </div>
            </div>
        </List>
        <Empty description="暂无数据~" v-if="balanceList.length === 0"/>
    </div>
</template>

<script>
    import {getGetMoneyList} from "../api/user";
    import dayjs from "dayjs";
    import {List,Empty } from "vant";
    import {mapGetters} from "vuex";
    import localStorage from "@utils/store/localStorage";

    export default {
        name: "GetMoneyList",
        components: {
            List,
            Empty
        },
        data() {
            return {
                balanceList: [],
                pageNo: 1,
                flag: false,
                name: null,
                loading: false,
                finished: false,
                pid:localStorage.get('creationId'),
            }
        },
        computed:{
            ...mapGetters(['userInfo'])
        },
        created() {
            this.init(this.userInfo.umId, 1,this.pid)
        },
        filters: {
            format: function (value) {
                if (!value) return ''
                return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
            },
            plusxing: function (str, frontLen, endLen) {
                let len = str.length - frontLen - endLen;
                let xing = '';
                for (let i = 0; i < len; i++) {
                    xing += '*';
                }
                return str.substring(0, frontLen) + xing + str.substring(str.length - endLen)
            }
        },
        methods: {
            init(userId, pageNo,pid) {
                getGetMoneyList(userId, pageNo,pid).then(res => {
                    this.loading = true;
                    this.balanceList.push.apply(this.balanceList, res.data.records);
                    this.loading = false;
                    this.flag = res.data.records.length >= 10;
                })
            },
            onLoad() {
                if (this.flag) {
                    this.pageNo++;
                    this.init(this.userInfo.umId, this.pageNo,this.pid)
                } else {
                    this.finished = true;
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .get-money-list-container {
        overflow: hidden;

        .get-money-list-box {
            width: 345px;
            background: rgba(255, 255, 255, 1);
            border-radius: 8px;
            margin: 15px auto;

            .get-money-list-item {
                height: 100px;
                padding: 0 20px;

                .top-item {
                    font-size: 14px;
                    font-weight: 400;
                    color: #42455F;
                    margin-top: 15px;

                    .status1 {
                        color: #2FC2E1;
                    }

                    .status2 {
                        color: #0DCDB5;
                    }

                    .status3 {
                        color: #FF8D51;
                    }

                    .status4 {
                        color: #42455F;
                    }
                }

                .bottom-item {
                    font-size: 12px;
                    font-weight: 400;
                    color: #A3A5B1;
                    margin-top: 5px;
                }
            }
        }
    }
</style>
